<template>
  <div>
    <div style="margin-bottom: 16px" >
      <div>
        <a-button type="primary" @click="showDrawer"> <a-icon type="plus" /> 新通知 </a-button>
        <a-input-search placeholder="input search text" v-model="sid" style="width:300px" @search="onSearch(sid)">
            <a-button slot="enterButton">
              搜索
            </a-button>
        </a-input-search>
        <a-drawer
            title="创建新通知"
            :width="720"
            :visible="visible"
            :body-style="{ paddingBottom: '80px' }"
            @close="onClose"
        >
          <a-form :form="form" layout="vertical" hide-required-mark>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="通知标题">
                  <a-input v-model="inputData.biaoti"
                      v-decorator="[
                  'Biaoti',
                  {
                    rules: [{ required: true, message: '请输入通知标题' }],
                  },
                ]"
                      placeholder="请输入通知标题"
                  >
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="通知时间">
                  <a-input v-model="inputData.time"
                      v-decorator="[
                  'Time',
                  {
                    rules: [{ required: true, message: '请输入通知时间' }],
                  },
                ]"
                      placeholder="请输入通知时间"
                  >
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="操作人">
                  <a-input v-model="inputData.people"
                      v-decorator="[
                  'People',
                  {
                    rules: [{ required: true, message: '请输入操作人' }],
                  },
                ]"
                      placeholder="请输入操作人"
                  >
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>

             <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="建设时间">
                  <a-input v-model="inputData.people"
                      v-decorator="[
                  'date',
                  {
                    rules: [{ required: true, message: '请输入建设时间' }],
                  },
                ]"
                      placeholder="请输入建设时间"
                  >
                  </a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <div
              :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          Index: 7,
        }"
          >
            <a-button :style="{ marginRight: '8px' }" @click="onClose">
              取消
            </a-button>
            <a-button type="primary" @click="onSubmit()">
              确定
            </a-button>
          </div>
        </a-drawer>
      </div>
      <div>
        <a-modal v-model="visible1" :title="curdata.biaoti" @ok="handleOk" @cancel="onClose">
          <p>{{ curdata }}</p>
        </a-modal>
      </div>
      <div>
        <a-modal v-model="visible2"  @ok="handleOk" @cancel="onClose">
          <p>{{ seadata }}</p>
        </a-modal>
      </div>
    </div>
     <h1>通知管理</h1>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
    >
    <!-- <a slot="action" slot-scope="record" @click="showModal(record.biaoti)">审批</a>
    <a slot="actionOne" slot-scope="record" @click="deleteIt(record.biaoti)">删除</a> -->
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'number',
  },
//   {
//     title: '状态',
//     dataIndex: 'state',
//   },
  {
    title: '通知标题',
    dataIndex: 'biaoti',
  },
  {
    title: '通知时间',
    dataIndex: 'time',
  },
  {
    title: '操作人',
    dataIndex: 'people',
  },
  {
    title: '建设时间',
    dataIndex: 'date',
  },
//   {
//     title: '操作',
//     key: 'operation',
//     fixed: 'right',
//     scopedSlots: { customRender: 'action' },
//     modal2Visible: false,
//   },
//   {
//     title: '操作',
//     key: 'operation-One',
//     fixed: 'right',
//     scopedSlots: { customRender: 'actionOne' },
//     modal2Visible: false,
//     visible: false,
//   },
];

// const data = [];
// for (let i = 1; i < 50; i++) {
//   data.number = i
// }

export default {
  data() {
    return {
      inputData: {
        biaoti: "",
        time: "",
        people:""
      },
      form: this.$form.createForm(this),
      visible: false,
      data: [
        {
          number: "1",
          biaoti: "JAVA高级培训通知",
          time: "2016-3-18",
          people:"张三",
          date:"2016-3-18",
        },
        {
          number: "2",
          biaoti: "架构师高级交流会通知",
          time: "2016-4-18",
          people:"李四",
          date:"2016-4-18",
        },
         {
          number: "4",
          biaoti: "项目经理交流会通知",
          time: "2016-3-18",
          people:"王五",
          date:"2016-3-18",
        },
         {
          number: "5",
          biaoti: "架构师高级交流会通知",
          time: "2016-4-18",
          people:"李四",
          date:"2016-4-18",
        },
         {
          number: "6",
          biaoti: "架构师高级交流会通知",
          time: "2016-4-18",
          people:"李四",
          date:"2016-4-18",
        },
      ],
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      curdata: '',
      seadate:'',
    //   visible:false,
      visible1:false,
      visible2:false,
      index: 7,
    };
  },

  methods: {
    showDrawer() {
      this.visible = true;
    },
    onClose(){
      this.visible = false;
      this.visible1=false;
      this.visible2=false;
    },
    onSubmit() {
      this.data.push({
        number: this.index++,
        state: "未审核",
        biaoti: this.inputData.biaoti,
        time: this.inputData.time,
        people: this.inputData.people
      });
      this.visible = false;
    },
    start() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible;
      console.log(modal1Visible);
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    showModal(curbiaoti) {
      this.visible1 = true;
     let curData = this.data.filter((item) => item.biaoti === curbiaoti)[0];
      this.curdata = curData;
    },
    handleOk(e) {
      console.log(e);
      this.visible1 = false;
      this.visible2 = false;
      this.editIt(this.curdata.biaoti); 
    },
    onSearch(sid) {
      this.visible2 = true;
      let seaData = this.data.filter((item) => item.biaoti == sid)[0];
      this.seadata = seaData;
    },
    editIt(id) {
        for(let i=0;i<this.data.length;i++) {
          if(this.data[i].biaoti === id) {
              this.data[i].state = "已审核";
          }
      }
    },
    deleteIt(biaoti) {
    this.data = this.data.filter((item) => item.biaoti !==biaoti)

    },
    test () {
      this.data.forEach((item,index) => {
        item.number = index
      })
    }
  },
}
</script>

